<script setup lang="ts">
import type { SysDictionaryDataQo } from '#/system/dict/dictionaryData'

import { createDictDataApi, getDictDataDetailsApi, updateDictDataApi } from '@/api/system/dict/dictData'

interface OnCloseResolveType extends CloseResolveType {
}
let onCloseResolve = function (_value: OnCloseResolveType) { }

const dialogRef = $ref<DialogInstance>()
const ruleFormRef = ref<FormInstance>()
let dialogModal = $ref<SysDictionaryDataQo>({})
let dialogAction = $ref<DialogAction>('add')
let confirmLoading = $ref(false)
let dialogLoading = $ref(false)

const rules = reactive<FormRules<SysDictionaryDataQo>>(
  {
    name: [
      { required: true, message: '请输入字典属性名称', trigger: 'blur' },
    ],
    dictValue: [
      { required: true, message: '请输入字典属性值', trigger: 'blur' },
    ],
  },
)

const styleList = [
  {
    value: 'default',
    label: '默认(default)',
  },
  {
    value: 'primary',
    label: '主要(primary)',
  },
  {
    value: 'success',
    label: '成功(success)',
  },
  {
    value: 'info',
    label: '信息(info)',
  },
  {
    value: 'warning',
    label: '警告(warning)',
  },
  {
    value: 'danger',
    label: '危险(danger)',
  },
]

async function getDefaultModel() {
  return {} as SysDictionaryDataQo
}
// 打开
async function showDialog(args: {
  title: string
  action?: DialogAction
  model: {
    id?: string
    dictType?: string
  }
}) {
  const dialogRes = dialogRef!.openDialog<OnCloseResolveType>({
    title: args.title,
  })

  ruleFormRef.value?.clearValidate()
  onCloseResolve = dialogRes.onCloseResolve

  dialogAction = args.action ?? 'add'

  if (args.model.id) {
    dialogModal.id = args.model.id
  }

  if (args.action === 'add') {
    const defaultModel = await getDefaultModel()
    dialogModal = {
      ...defaultModel,
      ...args.model,
    }
  }
  else if (args.action === 'edit' || args.action === 'views') {
    await reflash()
  }

  return await dialogRes.dialogPrm
}

async function reflash() {
  if (!dialogModal.id)
    return
  dialogLoading = true
  const res = await getDictDataDetailsApi(dialogModal.id)
  if (!res)
    return
  dialogLoading = false
  Object.assign(dialogModal, res.data)
}

// 确认
async function confirm(formEl: FormInstance | undefined) {
  if (!formEl)
    return
  await formEl.validate(async (valid) => {
    if (!valid) {
      return
    }
    confirmLoading = true
    if (dialogAction === 'add') {
      await createDictDataApi(dialogModal).finally(() => {
        confirmLoading = false
      })
    }
    else if (dialogAction === 'edit') {
      await updateDictDataApi(dialogModal).finally(() => {
        confirmLoading = false
      })
    }
    Message({
      type: 'success',
      message: `${DialogActionMap[dialogAction as DialogAction]}成功`,
    })
    onCloseResolve({ type: true })
  })
}

// 取消
function cancel() {
  ruleFormRef.value?.clearValidate()
  onCloseResolve({ type: false })
}

defineExpose({ showDialog })
</script>

<template>
  <sy-dialog
    ref="dialogRef"
    :before-close="cancel"
    :hide-confirm="dialogAction === 'views'"
    :confirm-loading="confirmLoading"
    :disabled-confirm="dialogLoading"
    @confirm="confirm(ruleFormRef)"
  >
    <el-form
      ref="ruleFormRef"
      v-loading="dialogLoading"
      :model="dialogModal"
      :rules="rules"
      label-width="auto"
      status-icon
    >
      <el-form-item label="字典类型" prop="dictType">
        <el-input
          v-model="dialogModal.dictType"
          :disabled="true"
        />
      </el-form-item>
      <el-form-item label="属性名" prop="name">
        <el-input
          v-model="dialogModal.name"
          placeholder="请输入字典属性名"
          :disabled="dialogAction === 'views'"
        />
      </el-form-item>
      <el-form-item label="属性值" prop="dictValue">
        <el-input
          v-model="dialogModal.dictValue"
          placeholder="请输入字典属性值"
          :disabled="dialogAction === 'views'"
        />
      </el-form-item>
      <el-form-item label="排序值" prop="dictSort">
        <el-input
          v-model="dialogModal.dictSort"
          type="number"
          :min="0"
          placeholder="请输入排序值"
          :disabled="dialogAction === 'views'"
        />
      </el-form-item>
      <el-form-item label="回显样式" prop="dictStyle">
        <el-select
          v-model="dialogModal.dictStyle"
          placeholder="请选择回显示样式"
          :disabled="dialogAction === 'views'"
        >
          <el-option
            v-for="item in styleList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="dialogModal.remark"
          type="textarea"
          placeholder="请输入备注"
          :disabled="dialogAction === 'views'"
        />
      </el-form-item>
    </el-form>
  </sy-dialog>
</template>

<style scoped></style>
